<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extend Selector Test Page</title>
<script src="../lib/simple.js"></script>
<script src="test.js"></script>
<link href="css.css" type="text/css" rel="stylesheet" />
<script>
$.Selector.alias({
	'3nth' : ['nth', '3n']	
});
$.Selector.extend({
	'top3Header' : function (elems) {
		return elems.grep(function (elem) {
			return ['H1', 'H2', 'H3'].include(elem.tagName);	
		});	
	}	
});
$(function () {
	":selected 1;:disabled 1;:text 2;:password 1;:checkbox 3;:radio 3;:submit 1;:input 11;#main :header 5;#main :header:even 2;#main :header:odd 3;#main :header:nth(3n+1) 2;#main :header:nth-last(1)[tagName=H5] 1;#main :header[0][tagName=H1] 1;#main :header[0..n-1] 4;#main :header[n] 1;#main :header[n-1] 1;#main :header:up(div)#main 1;#main :header:cd-parent 1;#main :header:3nth 1;#main :top3Header 3".split(';').
	each (function (s) {
		var takens = s.match(/^(.+)\s+(\d+)$/);
		var expression = '$("{0}").length'.format(takens[1]),
		expected = takens[2];
		assert(expression, expected);	
	});
});
</script>
<head>
<body>
<div id="main">
	<img src="../simple.png"/>
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<h4>h4</h4>
	<h5>h5</h5>
	<form>
		<label>Name:</label><input type="text" name="name"/><br/>
		<label>Email:</label><input type="text" name="email"/><br/>
		<label>Password:</label><input type="password" name="password" disabled="disabled"/><br/>
		<label>Sex:<select>
			<option value="male">male</option>
			<option value="female">female</option>
			<option value="unknow">unknow</option>
		</select><br/>
		<label>football:</label><input type="checkbox" name="sport" value="football" checked="checked"/>
		<label>basketball:</label><input type="checkbox" name="sport" value="basketball"/>
		<label>swing:</label><input type="checkbox" name="sport" value="swing"/><br/>
		<label>Which color do you like?</label>
		<label>black</label><input type="radio" name="color" value="black"/>
		<label>white</label><input type="radio" name="color" value="white"/>
		<label>red</label><input type="radio" name="color" value="red"/>
		<input type="submit" value="ok"/>
	</form>
	
	<div id="d1">
		<div id="d11">
			hello, <b>baboo</b>
		</div>
		<div id="d12"></div>
		<div id="d13">
			<div id="d131">
				<div id="d1311">
					my <b>name</b> is <b>baboo</b>
				</div>
			</div>	
		</div>
	</div>
</div>
<div id="output"><h3>output</h3><ol></ol></div>
</body>
</html>